import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    InteractionManager,
    Text,
    TouchableOpacity,
} from 'react-native';
import Common from '../common/constants';
import {InputItem, WhiteSpace, WingBlank, Button, Toast} from 'antd-mobile';

import { checkValidateCode } from '../actions/registerAction';

import RegisterPasswordContainer from '../containers/RegisterPasswordContainer';

export default class RegisterMobile extends React.Component{

    constructor(props) {
        super(props);

        this.state = {
            'code' : ''
        };
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            const {dispatch} = this.props;
            //dispatch(getValidateCode(this.state.guid));
        });
    }

    componentDidUpdate() {
        console.log('componentDidUpdate');
        let { registerMobileReducer } = this.props;
        console.log(this.props);
        //console.log(registerMobileReducer.res.errcode);

        if(registerMobileReducer.res.errcode === 9999){
            Toast.fail(registerMobileReducer.res.errmsg, 1);
            registerMobileReducer.res = {};
        }

        if(registerMobileReducer.res.errcode === 0){
            registerMobileReducer.res = {};
            Toast.success('成功', 1);

            this.props.navigator.push({
                component: RegisterPasswordContainer,
                leftButtonTitle : '< 返回',
                'navigationBarHidden' : false,
                'title' : '设置密码',
                passProps: { 
                    'mobile': this.props.mobile,
                    'guid' : this.props.guid,
                },
                onLeftButtonPress : () => this.props.navigator.pop()
            })
        }
    }


    _gogogo() {
        console.log(this.props);
        let para = {
            key: this.props.guid,
            mobile: this.props.mobile,
            code: this.state.code,
        }
        console.log(para);
        this.props.dispatch(checkValidateCode(para));
    }

    _back() {
        this.props.navigator.pop();
    }

    render(){

        let { registerMobileReducer } = this.props;

        return (
            <View style={styles.main}>
                <InputItem
                    type="number"
                    clear={true}
                    autpFocus={true}
                    onChange={(text) => {
                        this.setState({'code' : text});
                    }}
                >验证码</InputItem>
                <WhiteSpace size="lg" />
                <WingBlank size="lg">
                    <Button className="btn" type="primary" 
                        loading={registerMobileReducer.loading}
                        disabled={registerMobileReducer.loading}
                        activeStyle={registerMobileReducer.loading ? false : {}}
                        onClick={this._gogogo.bind(this)}
                    >下一步</Button>
                </WingBlank>
                <WhiteSpace size="lg" />
                <WingBlank size="lg">
                    <Button className="btn" 
                        onClick={this._back.bind(this)}
                    >返回</Button>
                </WingBlank>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    main : {
        marginTop : 20 + Common.window.height - 500,
        flexDirection: 'column', 
        alignContent : 'center',
    },

    v : {
        flexDirection : 'row',
    },

    validateInput : {
        width : Common.window.width - 180,
    },

    validateCode : {
        width : 150,
        height : 40,
        marginTop : 5,
    }

})